<template>
  <el-card>
    <template #header>
      <div>refreshOnWindowFocus【useRequest】</div>
    </template>
    <div style="margin-top: 16px">读取值：{{ loading ? "loading" : data }}</div>
    <el-button @click="refresh()">刷新</el-button>
  </el-card>
</template>

<script setup>
  import { useRequest } from "vue-hooks-plus";

  function getUsername() {
    console.log("刷新");

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(`${String(Date.now())}`);
      }, 1000);
    });
  }

  const { data, loading, refresh } = useRequest(() => getUsername(), {
    refreshOnWindowFocus: true,
    focusTimespan: 0,
    debounceWait: 500,
  });
</script>
